

<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <el-form-item label="地点">
        <div style="display:flex;justify-content:flex-start;align-items:center">
          <el-select @focus='fpointNoFocus' @change="fpointNoChange" style="display: inline-block;" clearable filterable
            v-model="listQuery.fpointNo" class="filter-item" placeholder="请选择地点">
            <el-option v-for="item in getListfpointNoQuery" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="设备IP">
        <el-input v-model="listQuery.ip" clearable class="filter-item" style="width: 260px" placeholder="请输入设备IP" />
      </el-form-item>
      <el-form-item label="时间">
        <input type="date" v-model="listQuery.start">
      </el-form-item>
      <el-form-item>
        <el-button round size="medium" class="filter-item"
          :style="{ background: buttonColor.edit, color: buttonColor.color }" @click="handleFilter">查找</el-button>
      </el-form-item>
    </el-form>

    <!-- 查询结果 -->
    <el-table :height="buttonColor.clientHeight" v-loading="listLoading" :data="list" :header-cell-style="tableColor"
      stripe element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column :width="buttonColor.line" :index="indexMethod" align="center" label="序" type="index" />
      <el-table-column align="left" label="地点名称" prop="fpointName" />
      <el-table-column align="left" label="设备IP" prop="derviceip">
        <template slot-scope="scope">
          <span v-if="scope.row.derviceip == '' || scope.row.derviceip == null">--</span>
          <span v-else>{{ scope.row.derviceip }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="事件时刻" prop="time" />
      <el-table-column align="left" label="本小时进" prop="enHour" />
      <el-table-column align="left" label="今日进" prop="enToday" />
      <el-table-column align="left" label="总共进" prop="enTotal" />
      <el-table-column align="left" label="本小时出" prop="exHour" />
      <el-table-column align="left" label="今日出" prop="exToday" />
      <el-table-column align="left" label="总共出" prop="exTotal" />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
  </div>
</template>
  
<style>
.button-margin {
  margin: 2px 0px;
}

.el-button+.el-button {
  margin-left: 1px;
}
</style>
  
<script>
import {
  deleteequipmentClass,
} from "@/api/equipmentClass";
import { getPointOptions } from '@/api/area'
import Pagination from "@/components/Pagination";
import moment from "moment";
import { tableColor, titleColor, buttonColor } from "@/filters/index";
import { personnelFlowlist } from "@/api/safetyManagement";
export default {
  name: "OrderInfo",
  components: { Pagination },
  data() {
    return {
      buttonColor: buttonColor,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        ip: '',
        fsiteNo: '',  //客户编号
        fpointNo: '', //房间编号
        end: undefined,
        start: undefined,

      },
      getListfpointNoQuery: null,  //地点
      dataForm: {
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      tableColor: tableColor,
      titleColor: titleColor,
    };
  },
  created() {
    this.listQuery.fsiteNo = this.$store.state.user.fsiteNo
    this.getListfpointNoQuerys();
    this.getList();
  },
  methods: {
     //获取地点
     getListfpointNoQuerys() {
      getPointOptions(this.$store.state.user.fsiteNo)
        .then(response => {
          this.getListfpointNoQuery = response.data.data.list
        })
        .catch(() => {
          this.getListfpointNoQuery = []
        })
    },
    // 搜索地点获取焦点
    fpointNoFocus() {
      if (!this.listQuery.fsiteNo) {
        this.getListfpointNoQuery = []
      }
    },
     // 搜索地点改变
     fpointNoChange(data) {
      this.printed = false
      this.isPrint = true
      if (data) {
      } else {
        this.listQuery.fpointNo = undefined
      }
    },
    // 获取列表数据
    substringdate(val) {
      var year = val.substring(0, 4)
      var ms = val.substring(4, 6)
      var d = val.substring(6, 8)
      var h = val.substring(8, 10)
      var m = val.substring(10, 12)
      var s = val.substring(12, 14)
      var dates = year + "-" + ms + "-" + d + " " + h + ":" + m + ":" + s
      return dates;
    },
    getList() {
      this.listLoading = true;
      var listQuery = JSON.parse(JSON.stringify(this.listQuery));
      if (this.listQuery.start == undefined) {
        listQuery.end = new Date()
        listQuery.start = new Date()
      }
      listQuery.start = moment(listQuery.start).format("YYYY-MM-DD");
      listQuery.start = moment(listQuery.start).format("YYYY-MM-DD HH:mm:ss");
      listQuery.end = new Date(listQuery.start).getTime() + (1000 * 60 * 60 * 24);
      this.listQuery.start = moment(listQuery.start).format("YYYY-MM-DD");
      this.listQuery.end = moment(listQuery.end).format("YYYY-MM-DD");
      listQuery.end = new Date(moment(listQuery.end).format("YYYY-MM-DD HH:mm:ss")).getTime();
      listQuery.start = new Date(moment(listQuery.start).format("YYYY-MM-DD HH:mm:ss")).getTime();
      listQuery.fsiteNo = this.$store.state.user.fsiteNo
      personnelFlowlist(listQuery)
        .then((response) => {
          var responselist = JSON.parse(JSON.stringify(response.data.data.list))
          var getListfpointNoQuery = this.getListfpointNoQuery
          for (var i in responselist) {
            for (var s in getListfpointNoQuery) {
              if (responselist[i].fpointNo == getListfpointNoQuery[s].value) {
                responselist[i].fpointName = getListfpointNoQuery[s].label
              }
            }
            responselist[i].time = moment(responselist[i].stuTime).format("YYYY-MM-DD HH:mm:ss")
          }
          this.list = responselist;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    // 查找
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 表单重置
    resetForm() {
      this.dataForm = {
      };
    },
    // 序号
    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>
  